<template>
  <div id="confirm-card-pay">
    <div class="pc">
      <!-- back part -->
      <go-to-back></go-to-back>

      <!-- order info part -->
      <div class="order-info">
        <div class="info-sn">订单号：{{ payInfo.order_sn }}</div>
        <div class="info-price ">
          订单金额：<span class="price-color">{{ payInfo.order_price }}</span> 人民币
        </div>
      </div>

      <!-- bind card inputs part -->
      <div class="bind-card-container">
        <div class="bind-title">输入验证码</div>

        <div class="bind-body">
          <div class="center-wrapper">
            <div class="bind-inputs">
              <label>
                <span>验证码</span>
                <input class="codeInput" type="text" placeholder="请输入短信验证码" v-model="phone_code" :maxlength="6"
                  @input="codeInputing" />
                <div class="other-tip" @click="reSend" v-if="canResend">{{ tip }}</div>
                <p v-else class="downTip">{{ tip }}</p>
              </label>
            </div>

            <div class="confirm-btn">
              <button @click="confirm('pc')">
                确认支付
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="phone">
      <p class="bindTitle">输入验证码</p>
      <div class="orderInfo">
        <p class="orderTitle">订单号：</p>
        <p>{{ payInfo.order_sn }}</p>
      </div>
      <div class="orderInfo">
        <p class="orderTitle">订单金额：</p>
        <p><span>¥</span>{{ payInfo.order_price }}</p>
      </div>
      <form v-on:submit.prevent>
        <six-input @complete="complete"></six-input>
      </form>
      <div class="reSendTip">
        <div v-if="codeTimeingNum === 60">
          <span>未收到验证码？可以</span>
          <span class="reSend" @click.stop="reSendCode">重新发送</span>
        </div>
        <div v-else>
          <span>{{ codeTimeingNum }}S后可重新发送</span>
        </div>
      </div>
      <div class="btnBox">
        <van-button v-if="!canSubmit" class="submit btn_grey" :disabled="!canSubmit">确认支付</van-button>
        <van-button v-else class="submit btn_color" :disabled="!canSubmit" @click="confirm('phone')">确认支付</van-button>
      </div>
    </div>

  </div>
</template>

<script>
// --- conponents ---
import GoToBack from "../category/components/GoToBack.vue";
// --- vuelidate ---
import { required, minLength } from "vuelidate/lib/validators";
// --- api ---
import { iscode } from "@/utils";
// --- utils ---
import { doPayApi, payOrderApi, advancePayApi, paymentBankcardApi, verifySmsApi } from "@/api";
import SixInput from "../../../../components/SixInput.vue";
import { mapState, mapMutations } from "vuex";
export default {
  name: "ConfirmCardPay",
  components: { GoToBack, SixInput },
  props: {},
  data() {
    return {
      // 表单信息
      phone_code: "",
      canResend: true,
      tip: "未收到验证码？",
      codeTimeingNum: 60,
      // 解决手机键盘弹起布局错位问题
      docmHeight:
        document.documentElement.clientHeight || document.body.clientHeight,
      showHeight:
        document.documentElement.clientHeight || document.body.clientHeight,
      hideshow: true, //显示或者隐藏footer
      canSubmit: false
    };
  },
  // vuelidate验证表单
  validations: {
    phone_code: {
      required,
      minLength: minLength(6),
    },
  },
  watch: {
    // 解决手机键盘弹起布局错位问题
    showHeight: function () {
      if (this.docmHeight > this.showHeight) {
        //隐藏
        this.hideshow = false;
      } else {
        //显示
        this.hideshow = true;
      }
    },
  },
  computed: {
    ...mapState(["payInfo",]),
  },
  methods: {
    // ------ store ------
    ...mapMutations(["setCouponId", 'setPayInfo']),
    // ------ async ------
    // 预支付
    async advancePay() {
      let res = await paymentBankcardApi({
        order_sn: this.payInfo.order_sn,
        card_no: this.payInfo.card_no,
        client_chnl: this.payInfo.client_chnl
      });
      if (iscode(res)) {
        console.log(res);
        this.$message({
          message: "短信发送成功",
          iconClass: "mySuccessIcon",
          customClass: "mySuccess",
        });
      }
    },
    //重新发送验证码
    reSend() {
      this.canResend = false
      let time = 60
      this.tip = time + "秒后可以重新发送"
      this.advancePay()
      let setIntervalId = setInterval(() => {
        time--
        this.tip = time + "秒后可以重新发送"
        if (time <= 0) {
          this.tip = "未收到验证码？"
          this.canResend = true
          clearInterval(setIntervalId)
        }
      }, 1000)
    },
    async reSendCode() {
      this.phone_code = "";
      let res = await paymentBankcardApi({
        order_sn: this.payInfo.order_sn,
        card_no: this.payInfo.card_no,
        client_chnl: this.payInfo.client_chnl
      });
      if (iscode(res)) {
        this.$toast('短信发送成功');
        // 验证码计时
        let codeTimer = setInterval(() => {
          this.codeTimeingNum = this.codeTimeingNum - 1;
          if (this.codeTimeingNum === 0) {
            clearInterval(codeTimer);
            this.codeTimeingNum = 60;
          }
        }, 1000);
      }
    },
    async doPay(type) {
      let res = await verifySmsApi({
        order_sn: this.payInfo.order_sn,
        verify_code: this.phone_code,
      });
      if (iscode(res)) {
        this.setCouponId("");
        this.setPayInfo({});
        if (type == 'pc') {
          this.$message({
            message: "支付成功",
            iconClass: "mySuccessIcon",
            customClass: "mySuccess",
          });
        } else {
          this.$toast('支付成功');
        }
        this.$router.push({
          path: "/payCompleted",
          query: {
            id: res.result.id, //商品id
            order_id: res.result.order_id, //订单号id
          },
        });
      }
    },
    // ------ 功能相关 ------
    complete(valArr) {
      this.phone_code = ""
      valArr.forEach((item) => {
        this.phone_code += item;
      });
      if (valArr.length > 6) {
        this.phone_code.substr(-6, 6)
      }
      this.canSubmit = true
    },


    // ------ common ------
    // 确定提交
    confirm(type) {
      if (this.$v.phone_code.$invalid) {
        if (type == 'pc') {
          // 没填完
          this.$message({
            message: "请填写短信验证码",
            iconClass: "myErrorIcon",
            customClass: "myError",
          });
        } else {
          this.$toast('请填写短信验证码');
        }

      } else {
        this.doPay(type);
      }
    },
    // 验证码输入事件
    codeInputing() {
      this.$nextTick(() => {
        this.phone_code = this.phone_code.replace(/[^\d]/g, "");
      });
    },
    // 初始化表单数据
    initFormData() {
      this.phone_code = "";
    },
  },
  created() {
  },

  mounted() { },
};
</script>

<style lang="less" scoped>
#confirm-card-pay {
  min-height: 850px;

  p {
    margin: 0;
  }

  .pc {

    // order info part
    .order-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 50px;
      background-color: #2b2c2d;
      padding: 0 40px;

      .info-sn,
      .info-price {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        line-height: 14px;
      }
    }

    // bind card inputs part
    .bind-card-container {
      width: 100%;
      height: 600px;
      background: #2b2c2d;
      margin-top: 19px;
      overflow: hidden;

      .bind-title {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 14px;
        padding: 20px 0 0 40px;
      }

      .bind-body {
        display: flex;
        justify-content: center;
        width: 100%;

        .center-wrapper {
          display: flex;
          flex-direction: column;
          padding-top: 100px;

          .bind-inputs {
            label {
              display: flex;
              align-items: center;
              height: 42px;
              padding: 0;
              margin: 0;
              margin-bottom: 20px;

              span {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 16px;
                text-align: right;
                min-width: 80px;
                word-break: keep-all;
              }

              input {
                width: 300px;
                height: 42px;
                background: #1e2020;
                border: 1px solid #444444;
                padding: 0 10px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 14px;
                margin-left: 23px;
              }

              input::-webkit-input-placeholder {
                /* WebKit browsers 适配谷歌 */
                color: #666666 !important;
              }

              input:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 适配火狐 */
                color: #666666 !important;
              }

              input::-moz-placeholder {
                /* Mozilla Firefox 19+ 适配火狐 */
                color: #666666 !important;
              }

              input:-ms-input-placeholder {
                /* Internet Explorer 10+  适配ie*/
                color: #666666 !important;
              }

              .codeInput {
                width: 187px;
              }

              .phone-code-btn {
                background: none;
                border: none;
                width: 100px;
                height: 42px;
                background-image: url("../../../../assets/images/pc_black/center/code_btn.png");
                background-position: center center;
                background-size: 100% 100%;
                margin-left: 13px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #00ffb0;
                line-height: 14px;
                cursor: pointer;
                word-break: break-all;
                white-space: nowrap;
              }
            }

            label:last-child {
              margin: 0;
            }
          }

          .other-tip {
            margin-left: 20px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00ffb0;
            line-height: 12px;
            text-align: center;
            cursor: pointer;
          }

          .downTip {
            margin-left: 20px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 12px;
            text-align: center;
          }

          .confirm-btn {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 60px;
            // transform: translateX(20px);

            button {
              display: flex;
              justify-content: center;
              align-items: center;
              min-width: 102px;
              height: 40px;
              background: #1e2020;
              border-radius: 4px;
              border: 1px solid #666666;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #999999;
              line-height: 14px;
              cursor: pointer;
            }

            button:first-child {
              background: #00ffb1;
              color: #1e2020;
              margin-right: 20px;
            }

            button:hover {
              box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }

    // public style
    .price-color {
      color: #00ffb0;
    }

    .opacity-half {
      opacity: 0.5;
    }
  }

  .phone {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  #confirm-card-pay {
    .pc {
      display: none;
    }

    .phone {
      display: block;
      padding: 0 50px;

      .bindTitle {
        margin-top: 224px;
        font-size: 48px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 60px;
      }

      .orderInfo {
        margin-top: 15px;
        display: flex;

        p {
          font-size: 22px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }

        .orderTitle {
          font-size: 22px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          min-width: 20%;
        }

        span {
          font-size: 18px;
          color: #00ffb0;
          margin-right: 3px;
        }
      }


      form {
        margin-top: 64px;
      }

      .reSendTip {
        width: 100%;
        margin-top: 40px;

        span {
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }

        .reSend {
          color: #00ffb0;
          margin-left: 12px;
        }
      }

      .btnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 100px;
        padding: 0 30px;

        .submit {
          width: 100%;
          height: 72px;
          font-size: 32px;
          font-family: Microsoft YaHei;
          border-radius: 0;
          color: #2b2c2d;
          font-weight: 500;
          border: none;
          background: none;
          background-position: center center;
          background-size: 100% 100%;
        }

        .btn_color {
          background-image: url("~@/assets/images/mobile_black/center/btn_color.png");
        }

        .btn_grey {
          background-image: url("~@/assets/images/mobile_black/center/btn_grey.png");
        }
      }
    }
  }
}
</style>
